<template>
	<div class="discbg">
		<div class="discBox">
			<swiper
				:slidesPerView="5"
				:slidesPerGroup="5"
				:loop="true"
				:navigation="true"
				:modules="modules"
				class="swiper-no-swiping"
			>
				<swiper-slide v-for="item in DiscList" :key="item.id">
					<div class="itemImg">
						<img :src="item.picUrl" alt="" />
						<a href="javascript:;" class="msg"></a>
						<a href="" class="play"></a>
					</div>
					<p>
						<a href="javascript:;">{{ item.name }}</a>
					</p>
					<p>
						<a href="javascript:;">{{ item.artist.name }}</a>
					</p>
				</swiper-slide>
			</swiper>
		</div>
	</div>
</template>
<script>
export default {
	name: "DiscBanner",
	components: "{}",
};
</script>

<script setup>
import { onMounted, ref } from "vue";
import { getDiscBanner } from "@/api/Recommended";
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation } from "swiper";

import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";

const modules = [Pagination, Navigation];

const DiscList = ref([]);

onMounted(() => {
	GetDiscBanner();
});

const GetDiscBanner = async () => {
	const data = await getDiscBanner(10);
	DiscList.value = data.albums;
};
</script>

<style lang="less">
.discbg {
	height: 186px;
	margin: 20px 0 0;
	border: 1px solid #d3d3d3;
	background: #f5f5f5;
	.swiper-pointer-events {
		overflow: visible;
	}
	.swiper-slide {
		text-align: center;
	}
	.swiper-button-prev:after,
	.swiper-button-next:after {
		font-size: 0;
		display: block;
		width: 17px;
		height: 17px;
		background: url(@/image/index.png) no-repeat;
		background-position: -260px -75px;
	}
	.swiper-button-next:after {
		background-position: -300px -75px;
	}
	.swiper-button-next,
	.swiper-button-prev {
		top: 0%;
		height: 100%;
		background: #f5f5f5;
	}
	.swiper-button-prev {
		left: -20px;
	}
	.swiper-button-next {
		right: -20px;
	}
	.swiper-button-prev:hover:after {
		background-position: -280px -75px;
	}
	.swiper-button-next:hover:after {
		background-position: -320px -75px;
	}
	img {
		width: 100px;
		height: 100px;
	}
}
.discBox {
	width: 655px;
	margin: 28px auto 0;
	padding: 0 10px;
	overflow: hidden;
	p {
		box-sizing: border-box;
		padding-left: 15px;
		text-align: left;
	}
	.itemImg {
		margin-left: -8px;
		margin-bottom: 7px;
		position: relative;
		.msg {
			position: absolute;
			left: 15px;
			width: 118px;
			height: 100px;
			background: url(@/image/coverall.png) no-repeat 0 -571px;
		}
		.play {
			display: none;
			position: absolute;
			right: 26px;
			bottom: 5px;
			width: 22px;
			height: 22px;
			background: url(@/image/iconall.png) no-repeat 0 -86px;
		}
	}
	.itemImg:hover {
		.play {
			display: block;
		}
	}
}
</style>
